<template lang="html">
  <div class="newsong-wrap">
    <div class="container">
      <div class="title">
        <h2>新歌</h2>
        <router-link class="more" to="/" tag="a">推荐新歌</router-link>
      </div>
      <div class="list clearfix">
        <div class="item" v-for="item of songsSlice" :key="item.id">
          <div class="box">
            <img class="img" :src="item.album.blurPicUrl">
            <div class="play-btn">
              <span class="iconfont nicebofang1"></span>
            </div>
          </div>
          <p class="remd-text">{{item.name.substring(0, 20)}}</p>
          <p class="name">{{item.artists[0].name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewSong',
  props: {
    songs: Array
  },
  computed: {
    songsSlice() {
      return this.songs.slice(0, 3)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .newsong-wrap {
    padding-bottom: 0.1rem;
    margin-bottom: 0.2rem;
    .title {
      display: flex;
      padding: 0 0 0.3rem;
			align-items: center;
			justify-content: space-between;
      h2 {
        font-size: 0.32rem;
        color: rgba(255, 255, 255, 1);
        font-weight: 100;
      }
			.more {
				display: block;
				padding: 0 0.15rem;
				height: 0.44rem;
				border: 1px solid rgba(255, 255, 255, 0.6);
				border-radius: 1rem;
				font-size: 0.24rem;
				text-align: center;
				color: rgba(255, 255, 255, 1);
				line-height: 0.44rem;
				font-weight: 200;
			}
    }
    .list {
      margin: 0 -0.5%;
      .item {
        width: 33.33333333%;
        display: inline-block;
        vertical-align: top;
        padding: 0 0.06rem 0.3rem;
        .box {
          position: relative;
          padding-bottom: 100%;
          .play-btn {
            width: 0.55rem;
            height: 0.55rem;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            position: absolute;
            right: 0.15rem;
            bottom: 0.15rem;
            z-index: 6;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              font-size: 0.25rem;
              color: #ff5b73;
              margin-left: 0.04rem;
              margin-top: 0.02rem;
            }
          }
          .img {
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            z-index: 1;
            border-radius: 0.15rem;
            vertical-align: middle;
          }
          &:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 3;
            background: rgba(0, 0, 0, 0.25);
          }
        }
        .remd-text {
          padding: 0.2rem 0.02rem 0 0rem;
          line-height: 1.4;
          font-size: 0.24rem;
					color: rgba(255, 255, 255, 0.8);
        }
        .name {
          font-size: 0.24rem;
          color: rgba(255, 255, 255, 0.6);
          margin-top: 0.1rem;
        }
      }
    }
  }
</style>
